1 files changed, 104 insertions, 0 deletions
diff --git a/src/pages/[locale]/jyne/index.astro b/src/pages/[locale]/jyne/index.astro
new file mode 100644
index 0000000..7a1b4f6
--- /dev/null
+++ b/src/pages/[locale]/jyne/index.astro
@@ -0,0 +1,104 @@
+---
+import type Locale from '$types/Locale';
+
+import { annualSubscriptionPrice } from '$data/subscriptionPrices';
+import contactDetails from '$data/contactDetails';
+import Page from '$layouts/Page.astro';
+import localeStaticPaths from '$lib/localeStaticPaths';
+import translate from '$i18n/translate';
+import tPage from '$i18n/translations/pages/jyne';
+import tMembershipType from '$i18n/translations/enums/membershipType';
+import { allMembershipTypes } from '$enums/MembershipType';
+
+export async function getStaticPaths() {
+  return localeStaticPaths;
+}
+
+const locale = Astro.params.locale as Locale;
+const t = translate(locale);
+---
+
+<Page title={t(tPage, { key: 'title' })}>
+  <header>
+    <h1 set:html={t(tPage, { key: 'title' })} />
+  </header>
+
+  <section>
+    <h2 set:html={t(tPage, { key: 'hou-jyne' })} />
+    <p set:html={t(tPage, { key: 'hou-jyne-intro' })} />
+
+    <table>
+      <caption>{t(tPage, { key: 'subscription-price-table-caption' })}</caption>
+      <thead>
+        <tr>
+          {
+            allMembershipTypes.map((membershipType) => (
+              <th scope="col">{t(tMembershipType, { key: membershipType })}</th>
+            ))
+          }
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr>
+          {
+            allMembershipTypes.map((membershipType) => (
+              <td>
+                {new Intl.NumberFormat('en-GB', {
+                  style: 'currency',
+                  currency: 'GBP',
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                }).format(annualSubscriptionPrice[membershipType])}
+              </td>
+            ))
+          }
+        </tr>
+      </tbody>
+    </table>
+
+    <ul class="payment-methods-list">
+      <li>
+        <details>
+          <summary set:html={t(tPage, { key: 'hou-pey-by-paypal-title' })} />
+          <ul>
+            <li><a href={`/${locale}/jyne/paypal/individual-uk`}>Individual (UK)</a></li>
+            <li><a href={`/${locale}/jyne/paypal/individual-non-uk`}>Individual (non-UK)</a></li>
+            <li><a href={`/${locale}/jyne/paypal/institution-uk`}>Institutional (UK)</a></li>
+          </ul>
+        </details>
+      </li>
+
+      <li>
+        <details>
+          <summary set:html={t(tPage, { key: 'hou-pey-by-bank-transfer-title' })} />
+          <p
+            set:html={t(tPage, {
+              key: 'hou-pey-by-bank-transfer-para',
+              emailAddress: contactDetails.membershipSecretary.emailAddress,
+            })}
+          />
+        </details>
+      </li>
+
+      <li>
+        <details>
+          <summary set:html={t(tPage, { key: 'hou-pey-by-cheque-title' })} />
+          <p
+            set:html={t(tPage, {
+              key: 'hou-pey-by-cheque-para',
+              address: contactDetails.membershipSecretary.address,
+            })}
+          />
+        </details>
+      </li>
+    </ul>
+  </section>
+
+  <section>
+    <h2 set:html={t(tPage, { key: 'why-jyne' })} />
+    <p set:html={t(tPage, { key: 'why-jyne-para-1' })} />
+    <p set:html={t(tPage, { key: 'why-jyne-para-2' })} />
+    <p set:html={t(tPage, { key: 'why-jyne-para-3' })} />
+  </section>
+</Page>